<template>
  <div>
    <!-- 卡片 -->
    <el-card>
      <el-button @click="go" icon="el-icon-back" type="text">返回</el-button>
      <h4>{{title}}</h4>
      <div class="content">
        <div class="box-card_left">
          <el-form
            :label-position="labelPosition"
            :model="sizeForm"
            label-width="140px"
            size="small"
          >
            <div style="float:left">
              <el-form-item label="项目名称">
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>
              <el-form-item label="工程类别">
                <el-select v-model="sizeForm.typeId" placeholder="请选择工程类别">
                  <el-option label="房建项目" value="1"></el-option>
                  <el-option label="厂房项目" value="2"></el-option>
                  <el-option label="市政项目" value="3"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="建筑用途">
                <el-input v-model="sizeForm.name"></el-input>
              </el-form-item>-->
              <el-form-item label="建筑面积">
                <el-input v-model="sizeForm.builtArea"></el-input>
                <span class="spanfont">平方米</span>
              </el-form-item>
              <el-form-item label="工程造价">
                <el-input v-model="sizeForm.engineeringCost"></el-input>
                <span class="spanfont">万元</span>
              </el-form-item>
              <el-form-item label="合同工期">
                <el-input v-model="sizeForm.contractDuration"></el-input>
                <span class="spanfont">天</span>
              </el-form-item>
              <el-form-item label="开工日期">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="sizeForm.beginDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
              </el-form-item>
              <el-form-item label="竣工日期" class="form_item_tiem">
                <el-col :span="11">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    v-model="sizeForm.endDate"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-col>
              </el-form-item>

              <el-form-item label="施工单位">
                <el-input v-model="sizeForm.unit"></el-input>
              </el-form-item>
              <el-form-item label="负责人">
                <el-input v-model="sizeForm.unitPerson"></el-input>
              </el-form-item>
              <el-form-item label="监控APPKEY">
                <el-input v-model="sizeForm.appKey"></el-input>
              </el-form-item>
              <el-form-item label="监控APPSECRET">
                <el-input v-model="sizeForm.appSecret"></el-input>
              </el-form-item>
            </div>
            <div style="float:right">
              <el-form-item label="地理位置">
                <el-input v-model="sizeForm.adddress" id="suggestId" name="sizeForm.adddress"></el-input>
                <div class="map_box" id="map"></div>
              </el-form-item>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="平面图" style="margin-left:0">
                    <el-upload
                      class="avatar-uploader"
                      :action="upload"
                      :show-file-list="false"
                      :on-success="handleSuccess"
                    >
                      <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
                    </el-upload>
                    <div v-if="planPath">
                      <el-image class="img" :src="planPath" :preview-src-list="[planPath]"></el-image>
                      <el-button @click="removePlan" style="display:block">删除</el-button>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="效果图" style="margin-left:0">
                    <el-upload
                      class="avatar-uploader"
                      :action="upload"
                      :show-file-list="false"
                      :on-success="handleSuccessRender"
                    >
                      <el-button size="small" type="primary" icon="el-icon-plus">上传</el-button>
                    </el-upload>
                    <div v-if="renderPath">
                      <el-image class="img" :src="renderPath" :preview-src-list="[renderPath]"></el-image>
                      <el-button @click="removeRender" style="display:block">删除</el-button>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="botton_btn">
        <el-button type="primary" size="small" class="btn_left" @click="save">保存</el-button>
        <el-button type="info" size="small" class="btn_right" @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import base from "../api/base";
export default {
  data() {
    return {
      title:'新建项目',
      upload: base.upload,
      labelPosition: "left", // 表单标签文字位置
      // 表单绑定属性
      sizeForm: {
        name: "", //工程名称
        typeId: "", //工程类型
        //建筑用途
        builtArea: "", //建筑面积
        engineeringCost: "", //工程造价
        contractDuration: "", //合同日期
        beginDate: "", //开工日期
        endDate: "", //竣工日期
        unit: "", //施工单位
        unitPerson: "", //施工单位负责人
        adddress: "",
        lat: "",
        lng: "", //地理位
        appKey: "",
        appSecret: "",
        rendering: "",
        planarGraph: ""
      },
      userlocation: { lng: "", lat: "" },
      rendering: "",
      planarGraph: "",
      renderPath: "",
      planPath: ""
    };
  },
  mounted() {
    this.$nextTick(function() {
      var th = this;
      // 创建Map实例
      var map = new BMap.Map("map");
      // 初始化地图,设置中心点坐标，
      // var point = new BMap.Point(121.160724, 31.173277); // 创建点坐标
      map.centerAndZoom("柳州", 15);
      map.enableScrollWheelZoom();
      var ac = new BMap.Autocomplete({
        //建立一个自动完成的对象
        input: "suggestId",
        location: map
      });
      var myValue;
      ac.addEventListener("onconfirm", function(e) {
        //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        th.sizeForm.adddress = myValue;
        setPlace();
      });
      function setPlace() {
        map.clearOverlays(); //清除地图上所有覆盖物
        function myFun() {
          th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
          map.centerAndZoom(th.userlocation, 18);
          map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
          th.sizeForm.lng = th.userlocation.lng;
          th.sizeForm.lat = th.userlocation.lat;
        }
        var local = new BMap.LocalSearch(map, {
          //智能搜索
          onSearchComplete: myFun
        });
        local.search(myValue);

        //测试输出坐标（指的是输入框最后确定地点的经纬度）
        map.addEventListener("click", function(e) {
          //经度
          console.log(th.userlocation.lng);
          //维度
          console.log(th.userlocation.lat);
        });
      }
      if (th.$route.params.row) {
        if(th.$route.params.row.planarGraph){
           th.planPath = `${base.download}${th.$route.params.row.planarGraph}`;
        }else{
          th.planPath = ""
        }

        if(th.$route.params.row.rendering){
            th.renderPath = `${base.download}${th.$route.params.row.rendering}`;
        }else{
          th.renderPath = ""
        }
       
        th.sizeForm = th.$route.params.row;
        var new_point = new BMap.Point(th.sizeForm.lng, th.sizeForm.lat);
        var marker = new BMap.Marker(new_point); // 创建标注
        map.addOverlay(marker); // 将标注添加到地图中
        map.panTo(new_point);
        this.title='修改项目'
      }else{
        this.title='新增项目'
      }
    });
  },
  methods: {
    //返回
    go() {
      this.$router.go(-1);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 修改跳转
    cancel() {
      this.$router.push("/mainhome");
    },
    // 保存接口
    save() {
      this.$api.loginhome
        .add(this.sizeForm)
        .then(res => {
          console.log(res);
          if (res.success) {
            this.$message.success("保存成功");
            this.$router.push("/mainhome");
          } else {
            console.log(res.message);
            this.$message.error(res.message);
          }
        })
        .catch(() => {});
    },
    handleSuccess(res, file) {
      this.planPath = URL.createObjectURL(file.raw);
      this.planarGraph = res.data.successFiles[0].filePath;
      this.sizeForm.planarGraph = this.planarGraph;
    },
    removePlan() {
      this.planarGraph = "";
      this.planPath = "";
      this.sizeForm.planarGraph="";
    },
    handleSuccessRender(res, file) {
      this.renderPath = URL.createObjectURL(file.raw);
      this.rendering = res.data.successFiles[0].filePath;
      this.sizeForm.rendering = this.rendering;
    },
    removeRender() {
      this.rendering = "";
      this.renderPath = "";
      this.sizeForm.rendering ="";
    }
  }
};
</script>

<style scoped>
.el-card__body h4 {
  margin: 10px 0px;
}
.content {
  display: flex;
  justify-content: space-around;
}
.box-card_left {
  width: 100%;
  /* padding: 10px; */
}
.box-card_right {
  width: 60%;
  padding: 20px;
}
.spanfont {
  line-height: 32px;
  font-size: 12px;
  padding-left: 10px;
}
/deep/.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 8px;
}
/deep/.el-input__inner {
  width: 250px;
}
.form_item_tiem {
  padding-bottom: 40px;
}
.el-input {
  width: 84%;
}
.el-col .el-col-8 ._button {
  text-align: center;
}
.botton_btn {
  display: flex;
  justify-content: center;
  padding-top: 20px;
}
.btn_left {
  margin-right: 200px;
}
.btn_right {
  margin-left: 200px;
}
.map_box {
  width: 500px;
  height: 300px;
  background: gainsboro;
  margin-top: 20px;
}
.img {
  margin-top: 20px;
  width: 160px;
  height: 160px;
}
</style>
